/* banner */
.swiper-container {
    width: 100%;
    height: 700px;
} 
.swiper-slide {
    background-size: cover;
    background-position: center;
}
:root{
	--swiper-theme-color:#333;
}
.swiper-button-prev, .swiper-button-next{
	top: 50%;
	width: 60px;
	height: 85px;
	background-color: rgba(0,0,0,.2);
	color: rgba(255,255,255,.5);
	/* line-height: 85px; */
	text-align: center;
}
.swiper-button-next{
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	right: 0;
}
.swiper-button-prev{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	left: 0;
}
.swiper-container-horizontal > .swiper-pagination-bullets{
	bottom: 23px;
}
/* 主体 */
.selector{
	width: 100%;
	min-height: 120px;
	/* z-index: 999; */
	margin-top: 50px;
}
.selector .container{
	width: 81%;
	padding: 0 15px;
}
/* 主体1 */
.selector1{
	margin-bottom: 40px;
	position: relative;
}
.select .header{
	margin-bottom: 15px;
	width: 100%;
	height: 28px;
	position: relative;
}
.select .header>h2{
	margin: 0;
	font-size: 26px;
	font-weight: 800;	
	color: #444;
	float: left;
	margin-right: 10px;
}
// .group-list{
// 	position: relative;
// 	width: 100%;
// }
.swiper-container2{
	width: 100%;
	height: 257px;
	overflow: hidden;
}
.swiper-container2 .swiper-slide{
	width: 15.82%;
	height: 247px;
	background-color: red;
	margin-right: 12px;
}
.swiper-container2 .swiper-slide:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .075);
}
.swiper-container2 .swiper-pagination2{
	width: 5% !important;
	text-align: right;
	left: 1141px !important;
	top: 12px;
	z-index: 100;
}
.swiper-container2 .swiper-button-next{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	top: 60%;
	background-color: white;
	color: black;
	right: -15px !important;
	z-index: 100;
}
.swiper-container2 .swiper-button-next::after,
.swiper-container2 .swiper-button-prev::after{
	font-size: 16px;
	font-weight: 700;
}
.swiper-container2 .swiper-button-prev{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	top: 60%;
	background-color: white;
	color: black;
	left: -15px !important;
	z-index: 100;
}
.swiper-container2 .swiper-button-next:hover{
	width: 45px;
	height: 45px;
	right: -23px !important;
	top: 58%;
}
.swiper-container2 .swiper-button-prev:hover{
	width: 45px;
	height: 45px;
	left: -23px !important;
	top: 58%;
}
.swiper-container2 .swiper-button-next:hover::after,
.swiper-container2 .swiper-button-prev:hover::after{
	font-size: 20px;
	font-weight: 700px;
}
.swiper-container2 .slide .swiper-slide a{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-color: white;
	z-index: 50;
}
.swiper-container2 .swiper-slide a:hover>h4{
	color: #0070c9 !important;
}
.swiper-container2 .swiper-slide a>span{
	width: 32px;
	height: 32px;
	background-color: #f0ad4e;
	margin: 5px;
	color: white;
	text-align: center;
	line-height: 32px;
	position: absolute;
	z-index: 66;
	border-radius: 50%;
	font-weight: 700;
	font-size: 16px;
}
.swiper-container2 .swiper-slide a>div{
	width: 100%;
	height: 190px;
	margin-bottom: 10px;
}
.swiper-container2 .swiper-slide a>div>img{
	width: 100%;
	height: 190px;
}
.swiper-container2 .swiper-slide a>h4{
	height: 46.7px;	
	margin: 0;
	padding: 0 14.5px 7.5px 14.5px;
	font-size: 14px;
	font-weight: 700;
	color: #000;
	text-align: center;
	border: none;
	background-color: transparent;
	margin-bottom: 0;
	font-family: inherit;
	line-height: 1.6em;
	
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
    word-break: keep-all;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
}
/* 主体2、3、4、5、6、7*/
.jiemian{
	width: 100%;
	height: 100%;
}
.selector2{
	width: 100%;
	height: auto;
	margin-bottom: 40px;
	position: relative;
}
.select .header>span{
	float: left;
	margin-top: 10px;
}
.select .header>span>a{
	font-size: 85%;
	color: #0070C9;
	text-decoration: none;
}
.select .header>span>a:hover{
	color: #00457d;
}
.selector2>p{
	position: absolute;
	right: 0;
	width: auto;
	height: 28px;
	top: 0;
}
.selector2>p>a{
	display: inline-block;
	height: 100%;
	max-width: 120px;
	padding: 4px 0;
	margin-left: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	color: #0070C9;
	text-decoration: none;	
	text-align: center;
}
.selector2>p>a:hover{
	border-bottom: 2px solid #0070C9;
}
.selector2>ul{
	width: 100%;
	height: 358px;
}
.selector2>ul>li{
	float: left;
}
.selector2>ul>li:nth-child(1){
	width: 50%;
	height: 348px;
	padding-right:6px;
}
.selector2>ul>li:nth-child(1)>a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
/* 主体2 */
.select:nth-child(1)>ul>li:nth-child(1)>a{
	background: url("https://www.boneshop.cn/media/catalog/category/1440_500-PhoneBubbleXI-02.jpg") no-repeat center center;
	background-size: cover;
}
/* 主体3 */
.select:nth-child(2)>ul>li:nth-child(1)>a{
	background: url("https://www.boneshop.cn/media/catalog/category/USB.jpg") no-repeat center center;
	background-size: cover;
}
/* 主体4 */
.select:nth-child(3)>ul>li:nth-child(1)>a{
	background: url("https://www.boneshop.cn/media/catalog/category/1440_500-Si-LeatherFast-Power10050-BK-01.jpg") no-repeat center center;
	background-size: cover;
}
/* 主体5 */
.select:nth-child(4)>ul>li:nth-child(1)>a{
	background: url("https://www.boneshop.cn/media/catalog/category/1440_500-01.jpg") no-repeat center center;
	background-size: cover;
}
/* 主体6 */
.select:nth-child(5)>ul>li:nth-child(1)>a{
	background: url("https://www.boneshop.cn/media/catalog/category/BikeTie3.jpg") no-repeat center center;
	background-size: cover;
}
/* 主体7 */
.select:nth-child(6)>ul>li:nth-child(1)>a{
	background: url("https://www.boneshop.cn/media/catalog/category/1440_500-02.jpg") no-repeat center center;
	background-size: cover;
}
.selector2>ul>li>a:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .075);
}
.selector2>ul>li:nth-child(1)>a>span{
	position: absolute;
	width: auto;
	height: 43px !important;
	background-color: rgba(0,0,0,.5)!important;
	color: white;
	line-height: 19px;
	text-align: center;
	text-shadow:1px 1px 3px rgba(0,0,0,.5);
	bottom: 2em;
	font-size: 18px;
	font-weight: 500;
	padding: 15px 12px;
}
.selector2>ul>li:nth-child(2){
	width: 25.2%;
	height: 348px;
}
.selector2>ul>li:nth-child(2)>a{
	display: block;
	width: 96.2%;
	height: 348px;
	background-color: white;
	margin: 0 6px;
	text-decoration: none;
}
.selector2>ul>li:nth-child(3){
	width: 24.8%;
	height: 348px;
	float: right;
}
.selector2>ul>li:nth-child(3)>a{
	display: block;
	width: 97.7%;
	height: 348px;
	background-color: white;
	margin-left: 6px;
	text-decoration: none;
}
.selector2>ul>li:nth-child(2)>a>div,
.selector2>ul>li:nth-child(3)>a>div{
	width: 100%;
	height: 291px;
	margin-bottom: 10px;
}
.selector2>ul>li:nth-child(2)>a>div>img,
.selector2>ul>li:nth-child(3)>a>div>img{
	width: 100%;
	height: 291px;
}
.selector2>ul>li:nth-child(2)>a>h4,
.selector2>ul>li:nth-child(3)>a>h4{
	margin: 0;
	width: 100%;
	height: 47px;
}
.selector2>ul>li:nth-child(2)>a>h4>pre,
.selector2>ul>li:nth-child(3)>a>h4>pre{
	margin: 0;
	width: 100%;
	height: 47px;
	padding: 0 14.5px 7.5px 14.5px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	border: none;
	background-color: transparent;
	text-overflow: ellipsis;
	overflow: hidden;
}
.selector2>ul>li:nth-child(2)>a:hover>h4>pre,
.selector2>ul>li:nth-child(3)>a:hover>h4>pre{
	color: #0070C9;
}
/* 主体8 */
.selector .eight{
	width: 100%;
	height: auto;
	padding: 48px 0;
	background-color: white;
}
.selector .eight .container h2{
	margin: 0;
	font-size: 26px;
	font-weight: 800;	
	color: #444;
	margin-bottom: 15px;
}
.selector .eight .container ul{
	width: 100%;
	height: 450px;
}
.selector .eight .container ul li{
	float: left;
	height: 100%;
}
.selector .eight .container ul li:nth-child(1){
	width: 66.6%;
}
.selector .eight .container ul li:nth-child(1)>a{
	display: block;
	width: 100%;
	height: 100%;
	background: url("https://vthumb.ykimg.com/054104085D28428000000157F300D558") no-repeat center center;
	background-size: cover;
	position: relative;
}
.selector .eight .container ul li:nth-child(1)>a>img{
	width:112px;
	height: 112px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto auto;
}
.selector .eight .container ul li:nth-child(2){
	width: 33.4%;
	background-color: #000000;
	position: relative;
}
.selector .eight .container ul li:nth-child(2)>*{
	font-size: 14px;
	vertical-align: middle;
	display: inline-block;
}
.selector .eight .container ul li:nth-child(2)>div{
	width: 100%;
	height: 170.4px;
	padding: 15px;
	color: #fff !important;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
.selector .eight .container ul li:nth-child(2)>div>h3{
	margin-top: 0;
}
.selector .eight .container ul li:nth-child(2)>div>a{
	display: inline-block;
	width: 277.5px;
	height: 34px;
	background-color: #0070c9;
	color: #fff;
	border: 1px solid #0062b0;
	padding: 6px 12px;
	margin-top: 20px;
	border-radius: 4px;
	font-weight: 400;
	font-size: 14px;
	text-decoration: none;
	vertical-align: middle;
}
.selector .eight .container ul li:nth-child(2)>div>a:hover{
	background-color: #0062b0;
}